<template>
	<view class="page business-number-get">
		<nav-header title="发放工作号" :show-right="show">
			<template v-slot:right>
				<!-- <up-button @click="goAdd" text="创建工作号"></up-button> -->
				<text @click="goAdd" style="color: #2970FF;">创建工作号</text>
			</template>
		</nav-header>

		<view class="number-none" v-if="show">
			<svg-icon icon="none" :width="230"></svg-icon>
			<text>暂时还没有工作号可发放</text>
			<view>您可以 <text class="add" @click="goAdd">创建</text> 工作号</view>
		</view>

		<view v-else>
			<view class="getNumber">
				<text>工作号</text>
				<uni-data-select v-model="value" :localdata="workNumber" @change="changeWork"
					style="width: 500rpx;"></uni-data-select>
			</view>
			<view class="getUname">
				<text class="title">员工</text>
				<!-- <input @tap="friendShow=true" v-model="showName" type="text" placeholder="请选择商友"> -->
				<view class="right" @tap="friendShow=true">
					<text v-if="!showName">请选择友商</text>
					<text v-else>{{showName}}</text>
					<svg-icon icon="arrowRight" :width="32"></svg-icon>
				</view>
			</view>
			<view class="getName">
				<view class="nickname text-sm-Medium">
					<view>
						<text>员工姓名 </text>
						<text class="tip"> (将作为工作号对外展示昵称)</text>
					</view>
					<view style="color: #A4A7AE;">
						{{sumName}}/10
					</view>
				</view>
				<view>
					<input v-model="nikeName" @input="countName" maxlength="10" type="text" placeholder="请输入">
					<text class="text-xs-Regular" style="color: #F79009;">*工作号中存在上一份员工聊天记录，请妥善处理</text>
				</view>
			</view>
			
			<tabbar-button-group text="确认发放" @click="submit"></tabbar-button-group>
		</view>

		<!-- <view class="button">
			<button @click="submit">确认</button>
		</view> -->
	</view>

	<view class="parent-component">
		<SelectUser @onShow="onShowRules" v-if="friendShow" :isShow="friendShow" :method="'GET'" :url="`/friend/list`"
			@userSelected="handleSelectedUsers" />
	</view>
</template>

<script>
	import SelectUser from '../../components/select-user/select-user.vue';
	export default {
		components: {
			SelectUser
		},
		data() {
			return {
				show: false,
				companyId: null,
				workNumberId: null,
				userId: null,
				showName: '',
				nikeName: "",
				friendShow: false,
				value: 0,
				workNumber: [],
				sumName:0  //姓名长度
			}
		},

		methods: {
			submit() {
				const workNumber = {
					id: this.workNumberId,
					userId: this.userId,
					employeeName: this.nikeName,
					companyId: this.companyId,
				}
				console.log("workNumber", workNumber)
				this.$http({
					url: `/job/distribution`,
					data: workNumber,
					method: 'POST'
				}).then(res => {
					uni.showToast({
						title: '分配成功',
						icon: 'success',
						duration: 1000 // 设置显示时长为 3000 毫秒
					});


					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1000); // 3000 毫秒即 3 秒后执行返回上一页操作
				});

			},
			countName(e){
				this.sumName=e.detail.value.length
			},
			changeWork(){},
			goAdd() {
				uni.navigateTo({
					url: `/pageSubOne/business-chat/business-number-add?companyId=${this.companyId}`
				})
			},

			_getData(companyId) {

				const that = this
				// 获取公司正在使用的工作号
				this.$http({
					url: `/job/0/${companyId}/list`,
					method: 'GET'
				}).then(res => {
					console.log("工作号列表", res)
					if (res.length === 0) {
						that.show = true
					}
					this.workNumber = res.map(employee => {
						return {
							text: employee.id,
							value: employee.id
						}
					})
				});
			},

			handleSelectedUsers(selectedUsers) {
				console.log("this.selectedUsers", selectedUsers)
				this.userId = selectedUsers[0].id
				this.showName = selectedUsers[0].nickName
				this.friendShow = false; // 隐藏 SelectUser 组件
			},
			onShowRules() {
				this.friendShow = false; // 隐藏 SelectUser 组件
			},


		},

		onLoad(options) {
			this.companyId = parseInt(options.companyId)
			this._getData(this.companyId)
		}
	}
</script>

<style lang="scss" scoped>
	.business-number-get {
		width: 100vw;
		height: 90vh;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;

		.number-none {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			color: #aaa;
			font-size: 30rpx;

			.add {
				color: #007aff;
			}
		}

		.getNumber {
			display: flex;
			align-items: center;

			text {
				width: 120rpx;
			}
		}

		.getUname {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;
			
			.right{
				display: flex;
				align-items: center;
				gap: 8rpx;
				color: $gray-400;
			}

			.title {
				width: 120rpx;
				// margin-top: 10rpx;
			}

			input {
				border: 1rpx solid #e5e5e5;
				border-radius: 10rpx;
				width: 470rpx;
				padding: 15rpx;
				font-size: 24rpx;
			}
		}

		.getName {
			display: flex;
			flex-direction: column;
			gap: 24rpx;
			margin-top: 40rpx;
			
			.nickname{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			text {
				width: 160rpx;
				margin-top: 10rpx;
			}

			input {
				border: 1rpx solid #e5e5e5;
				border-radius: 10rpx;
				// width: 470rpx;
				padding: 15rpx;
				font-size: 24rpx;
			}

			.tip {
				font-size: 26rpx;
				color: #aaa;
			}
		}

		.button {
			padding: 30rpx;
			position: fixed;
			bottom: 20rpx;
			left: 0;

			button {
				margin-top: 20rpx;
				font-size: 28rpx;
				background-color: #007aff;
				color: #fff;
				width: 685rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 20rpx;
			}
		}
	}

	.parent-component {
		position: relative;
		width: 100%;
		height: 100%;
		z-index: 999;
	}
</style>